<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>Ambari安装</el-breadcrumb-item>
  </el-breadcrumb>

  <el-steps :active="active" finish-status="success" align-center>
    <el-step title="create Databases" description="创建ambari数据库及用户"/>
    <el-step title="yum ambari" description="选择ambari-server节点，yum 安装ambari-server及ambari-agent"/>
    <el-step title="scp databases driver" description="发送数据库驱动到各主机"/>
    <el-step title="ambari setup" description="执行ambari-server setup"/>
    <el-step title="ambari database init" description="执行ambari数据库初始化"/>
    <el-step title="ambari optimize" description="ambari 优化"/>
  </el-steps>

  <el-table :data="ambariTableData" ref="singleTableRef" highlight-current-row width="80%" :cell-style="cellStyle"
            @row-click="getRowInfo">

    <el-table-column prop="id" type="index" width="55"/>
    <el-table-column prop="hostIp" label="主机IP"></el-table-column>
    <el-table-column prop="isAmbariFlag" label="Ambari Server安装" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="isAmbariClientFlag" label="Ambari Client安装" :formatter="formatter"></el-table-column>
    <el-table-column prop="isAmbariDBDriverFlag" label="驱动分发" :formatter="formatter"></el-table-column>
    <el-table-column prop="isAmbariSetupFlag" label="Ambari Setup" :formatter="formatter"></el-table-column>
    <el-table-column prop="isAmbariDBInit" label="Ambari数据库初始化" :formatter="formatter"></el-table-column>
    <el-table-column prop="isAmbariServerOptimize" label="Ambari优化" :formatter="formatter"></el-table-column>
  </el-table>

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
           v-loading="ambariLoading">
    <div class="flex-grow"/>
    <el-menu-item index="1" @click="autoInstallStart">
      <el-icon>
        <UploadFilled/>
      </el-icon>
      自动安装
    </el-menu-item>
    <el-menu-item index="2" @click="uninstallCluster">
      <el-icon>
        <UploadFilled/>
      </el-icon>
      卸载群集
    </el-menu-item>
  </el-menu>
</template>

<script>
import {ref, reactive, toRef} from 'vue';
import {ElTable, ElTableColumn} from 'element-plus';
import axios from 'axios';
import global from '../components/Global.vue';

const state = reactive({
  color: "black"
});
export default {
  components: {
    ElTable,
    ElTableColumn
  },
  setup() {
    const ambariTableData = ref([
      {
        hostIp: '192.168.152.100',
        isAmbariFlag: 1,
        isAmbariClientFlag: 1,
        isAmbariDBDriverFlag: 1,
        isAmbariSetupFlag: 1,
        isAmbariDBInit: 1,
        isAmbariServerOptimize: 1

      }
    ]);

    const tableRadio = ref(null);
    const ambariLoading = ref(false);
    const colorRef = toRef(state, "color");

    const cellStyle = ({row, column}) => {

      if (column.isAmbariFlag === 1) {
        return {
          color: 'green',
          isAmbariFlag: '✔'
        }
      }

      if (row.isAmbariFlag === 2) {
        return {
          color: 'red',
          isAmbariFlag: '-'
        }
      }

      if (row.isAmbariFlag === null) {
        return {
          color: '#000',
          isAmbariFlag: '-'
        }
      }

    }
    const formatter = (row, column, cellValue) => {
      //row每行的内容 column每一列的属性信息 cellValue单元格的值
      if (cellValue === 0) { //不包含值为 0 的情况 另做判断
        colorRef.value = "red";
        return 'X';
      } else if (cellValue === 1) { //cellValue会自动将0值过滤出来不展示 单独做判断
        colorRef.value = "green";
        return '✔';
      } else {
        colorRef.value = "black";
        return '-' //没有值时展示 --
      }
    };

    return {
      ambariTableData,
      tableRadio,
      formatter,
      cellStyle,
      ambariLoading
    };
  },
  created() {
    this.loadambariTableData();
  },
  data() {
    return {
      radio: "",
      rowInfo: {},
      baseUrl: global.baseUrl,
      active: 1
    }
  },
  methods: {
    uninstallCluster() {
      console.info("========== uninstall Cluster =>");
      
      var url = global.baseUrl + '/ambari/uninstall';
      this.ambariLoading = true;
      this.$confirm('此操作将永久卸载Ambari群集, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.put(url, null, global.config)
            .then((response) => {
              //console.info(response.data.obj.active);
              //console.info(response.data.data);
              this.$message({
                message: "Ambari群集卸载成功",
                type: "success"
              });
              this.ambariTableData = response.data.data;
              this.ambariLoading = false;
            })
            .catch((error) => {
              console.error(error);
              this.$message({
                message: "Ambari群集卸载错误",
                type: "error"
              });
              this.ambariLoading = false;
            });
      }).catch(() => {
        this.ambariLoading = false;
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    autoInstallStart() {

      //console.log('自动优化开始......服务自行查询主机进行优化。');
      console.info("==========rowInfo=ambari server IP:=>", this.rowInfo.hostIp);

      if (!this.rowInfo.hostIp) {
        this.$message({
          message: "请选择Ambari-server主机.",
          type: 'warning'
        });
        return;
      }
      this.ambariLoading = true;
      var url = global.baseUrl + '/ambari/autoStart';
      axios.put(url, this.rowInfo, global.config)
          .then((response) => {
            //console.info(response.data.obj.active);
            //console.info(response.data.data);
            this.$message({
              message: "Ambari自动安装成功",
              type: "success"
            });
            this.active = response.data.obj.active;
            this.ambariTableData = response.data.data;
            this.ambariLoading = false;
          })
          .catch((error) => {
            console.error(error);
            this.$message({
              message: "Ambari自动安装错误",
              type: "error"
            });
            this.ambariLoading = false;
          });
    },
    loadambariTableData() {//要加参数，返回active，可以增加到obj对象中
      var url = global.baseUrl + '/host/list/ambari';
      axios.get(url)
          .then((response) => {
            console.log("==========>\n", response.data);
            this.ambariTableData = response.data.data;
            if (response.data.obj != null) {
              this.active = response.data.obj.active;
            }

          })
          .catch((error) => {
            console.error(error);
          });
    },
    getRowInfo(row) {
      //console.info(row.id, row);
      this.radio = row.id;
      this.rowInfo = row;
    }
  }
};
</script>

<style>
.current-row {
  font-weight: bold;
}

.el-table {
  margin: 3px auto;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-tag.el-tag--success {
  --el-tag-text-color: null;
  color: var(--el-color-success);
}

.el-tag.el-tag--success {
  --el-tag-bg-color: null;
  --el-tag-border-color: null;
  --el-tag-hover-color: null;
  color: var(--el-color-success);
}
</style>
  